<template>
  <div class="activate-user">
    <div class="title">地区商家销售排行</div>
    <div class="list-wrapper">
      <div class="list-inner" v-for="(item, index) in headerData" :key="index">
        <div class="list">
          <div class="list-title">{{item.title}}</div>
          <div class="list-separator-wrapper">
            <div class="list-separator" />
          </div>
          <div class="chart-wrapper">
            <div class="img-wrapper">
              <img :src="item.img">
            </div>
            <div class="chart" :id="`activate-user-chart${index + 1}`" />
          </div>
          <div class="category-wrapper">
            <country-category
              :data="['商家', '订单数', '销售额']"
              :color="['rgb(178, 209, 126)', 'rgb(116, 166, 49)']"
            />
          </div>
          <div class="scroll-list-wrapper">
            <auto-scroll-table
              :config="config[index]"
              style="width:100%;height:190px;background:rgb(40,40,40);"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Echarts from 'echarts'
  import { ref, watch, nextTick } from 'vue'
  import AutoScrollTable from '../AutoScrollTable/index'
  import CountryCategory from '../CountryCategory/index'

  export default {
    name: 'activateUser',
    components: {
      CountryCategory,
      AutoScrollTable
    },
    props: {
      data: Array
    },
    setup(props) {
      const headerData = ref([])
      const config = ref([])
      let currentIndex = 0
      watch(() => props.data, () => {
        const currentData = props.data.slice(currentIndex, currentIndex + 3)
        headerData.value = [{
          title: currentData[0].city,
          img: 'https://img.alicdn.com/tfs/TB1Z171qebviK0jSZFNXXaApXXa-30-29.png'
        }, {
          title: currentData[1].city,
          img: 'https://img.alicdn.com/tfs/TB1b8Tzq7T2gK0jSZFkXXcIQFXa-28-24.png'
        }, {
          title: currentData[2].city,
          img: 'https://img.alicdn.com/tfs/TB12MbzqYY1gK0jSZTEXXXDQVXa-28-30.png'
        }]
        const configArray = []
        for (let i = 0; i < currentData.length; i++) {
          const data = []
          const align = []
          const shopData = currentData[i].shop
          for (let j = 0; j < shopData.length; j++) {
            data[j] = []
            align[j] = 'center'
            for (let k = 0; k < 3; k++) {
              let text = ''
              switch (k) {
                case 0:
                  text = shopData[j].shop
                  break
                case 1:
                  text = shopData[j].order
                  break
                case 2:
                  text = shopData[j].sales
                  break
                default:
              }
              if (k === 2) {
                data[j].push(`<div style="color:rgb(178,209,126)">${text}</div>`)
              } else {
                data[j].push(`<div>${text}</div>`)
              }
            }
            const _config = {
              data, // 表格数据
              align, // 表格排序
              rowNum: 3, // 显示行数
              oddRowBGC: 'rgb(40, 40, 40)', // 奇数背景色
              evenRowBGC: 'rgb(55, 55, 55)', // 偶数背景色
              columnFontSize: 22 // 表格文字大小
            }
            configArray.push(_config)
          }
        }
        config.value = configArray

        function createOption() {
          const data = []
          data[0] = Math.ceil(Math.random() * 100)
          data[1] = 100 - data[0]
          return {
            color: ['rgb(210, 244, 148)', 'rgb(79, 79, 79)'],
            grid: {
              left: 0,
              top: 0,
              right: 0,
              bottom: 0
            },
            title: {
              text: `${data[0]}%`,
              left: 'center',
              top: '60%',
              textStyle: {
                color: 'rgb(210, 244, 148)',
                fontSize: 18,
                align: 'center'
              }
            },
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: ['70%', '90%'],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: 'center'
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data: [
                  {
                    value: data[0],
                    name: '活跃用户'
                  },
                  {
                    value: data[1],
                    name: '非活跃用户'
                  }
                ]
              }
            ]
          }
        }

        nextTick(() => {
          const chart = []
          headerData.value.forEach((item, index) => {
            const id = `activate-user-chart${index + 1}`
            chart[index] = Echarts.init(document.getElementById(id))
            chart[index].setOption(createOption())
          })

          if (currentIndex >= props.data.length - 3) {
            currentIndex = 0
          } else {
            currentIndex++
          }
        })
      })
      return {
        headerData,
        config
      }
    }
  }
</script>

<style lang="scss" scoped>
  .activate-user {
    width: 100%;
    height: 100%;
    background: rgb(55, 55, 55);
    padding-right: 20px;
    box-sizing: border-box;

    .title {
      font-size: 36px;
      margin-left: 20px;
      padding: 20px 40px 0;
      box-sizing: border-box;
    }

    .list-wrapper {
      display: flex;
      width: 100%;
      height: 563px;
      margin-top: 20px;
      padding: 0 10px;
      box-sizing: border-box;

      .list-inner {
        flex: 0 0 33.33%;
        width: 33.33%;
        padding: 0 10px;
        box-sizing: border-box;

        .list {
          width: 100%;
          height: 100%;
          background: rgb(45, 45, 45);

          .list-title {
            font-size: 24px;
            padding: 10px 20px;
            box-sizing: border-box;
          }

          .list-separator-wrapper {
            position: relative;
            height: 30px;
            background: rgb(93, 93, 93);

            .list-separator {
              position: absolute;
              top: 7.5px;
              right: 15px;
              width: 15px;
              height: 15px;
              background: rgb(50, 50, 50);
            }
          }
        }

        /*&:first-child {
          padding: 0;
        }

        &:last-child {
          padding: 0;
        }*/

        .chart-wrapper {
          position: relative;
          width: 100%;
          height: 200px;
          margin-top: 20px;

          .img-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            width: 100%;
            height: 100%;

            img {
              width: 42px;
              height: 42px;
              margin-top: 60px;
            }
          }

          .chart {
            width: 100%;
            height: 100%;
          }
        }

        .category-wrapper {
          margin-top: 20px;
        }

        .scroll-list-wrapper {
          margin-top: 20px;
        }
      }
    }
  }
</style>
